<template>
  <!--根div-->
  <div id="root">
    <!--标题部分-->
    <div class="title">欢迎使用医学图像标注系统</div>
    <div class="introduction">
      本系统的主要目的是提供免费的在线医学图像标注工具，并且支持同时支持多边形标注以及自由标注等标注方法。
      <!--标题部分结束-->
    </div>
    <!--表单-->
    <div class="inputbox">
      <div class='boxTitle'>登录</div>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户类型" prop="utype">
          <el-select v-model="ruleForm.select" placeholder="请选择">
            <el-option label="标注者" value="1"></el-option>
            <el-option label="审核者" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" prop="uname">
          <el-input v-model="ruleForm.uname" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
      <!--表单结束-->
    </div>
    <div class='imgContainer'><img src='..\assets\img1.jpg'></div>
    <!--根div结束-->
  </div>
</template>

<script>
export default {
  data() {
    var validateUname = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };

    return {
      ruleForm: {
        uname: "",
        pass: "",
        select: "",
      },
      rules: {
        uname: [{validator: validateUname, trigger: "blur"}],
        pass: [{validator: validatePass, trigger: "blur"}],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          if (this.ruleForm.select == '1') {
            sessionStorage.setItem('role', '0');
          } else {
            sessionStorage.setItem('role', '1');
          }
          console.log(sessionStorage.getItem('role'));
          sessionStorage.setItem('username', this.ruleForm.uname);
          sessionStorage.setItem('login_state', 'true');
          this.$router.push({path: '/patient'});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
input {
  display: none;
}

img {
  height: 50%;
  width: 50%;
  position: relative;
  left: 200px;
  top: 85px;
}

.title {
  font-size: 150%;
  font-weight: bold;
  margin-left: 50px;
  margin-top: 50px;
}

.introduction {
  margin-left: 50px;
  margin-top: 10px;
}

.inputbox {
  display: inline-block;
  margin-left: 50px;
  margin-top: 50px;
  padding: 50px 100px 100px 20px;
  width: 300px;
  border: 5px solid #750000;
  border-radius: 30px;
}

.boxTitle {
  font-size: 150%;
  font-weight: bold;
  margin-left: 45px;
  margin-bottom: 30px;
}

.imgContainer {
  display: inline-block;

}
</style>

